<template>
  <div>
    <div class="form" >
      <div>
        项目名称：<el-input style="width: 200px;" v-model="keyWord.xmmc" placeholder="请输入项目名称"></el-input>
      </div>
      <div>
        状态：<el-select v-model="keyWord.cxsqZt" placeholder="选择撤销申请状态">
          <el-option v-for="item in zt" :key="item.keyname" :label="item.keyname" :value="item.keyvalue">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="showXmCxsq()">搜索</el-button>
      </div>
    </div>
    <el-table :data="xmCxsqList" border class="etable">
      <el-table-column align="center" prop="xmMc" label="项目名称">
      </el-table-column>
      <el-table-column align="center" prop="cxsqTcrq" label="退出日期">
      </el-table-column>
      <el-table-column align="center" prop="cxsqFzrmc" label="负责人名称">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag effect="dark" type="primary" v-if="scope.row.cxsqZt === '0'">未审批</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.cxsqZt === '1'">已审批</el-tag>
          <el-tag effect="dark" type="danger" v-if="scope.row.cxsqZt === '2'">驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cxsqSprmc" label="审批人">
      </el-table-column>
      <el-table-column align="center" prop="cxsqSpsj" label="审批时间">
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.cxsqZt === '0'" @click="toapprovalXmcxsq(scope.row.xmBh)"
                     type="success" size="small" v-permission="'approvalXmCxsq'">审批
          </el-button>
          <el-button @click="showXmcxsq(scope.row.xmBh)" type="info" size="small">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination ref="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="size">
      </el-pagination>
    </div>

    <el-dialog title="修改项目撤销申请" :visible.sync="upCxsqdialogVisible" width="30%">
      <el-form :model="upCxsq">
        <el-form-item label="项目名称" label-width="100px">
          <el-input v-model="upCxsq.xmMc" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="撤销原因" label-width="100px">
          <el-input disabled v-model="upCxsq.cxsqYy" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
        <el-form-item label="准备退出日期" label-width="100px">
          <el-date-picker v-model="upCxsq.cxsqTcrq" autocomplete="off" type="date" ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否审批通过" label-width="120px">
          <el-radio v-model="upCxsq.cxsqZt" label="1">审批通过</el-radio>
          <el-radio v-model="upCxsq.cxsqZt" label="2">驳回</el-radio>
        </el-form-item>
        <el-form-item label="审批意见/驳回意见" label-width="80px">
          <el-input v-model="upCxsq.cxsqSpyj" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
        <el-form-item label="房间打扫情况" label-width="80px">
          <el-input v-model="upCxsq.cxsqDsqk" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="approvalXmCxsq()">确 定</el-button>
        <el-button @click="upCxsqdialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="项目撤销申请详情" :visible.sync="CxsqDetaildialogVisible" width="30%">

      <el-descriptions column="1" border>
        <el-descriptions-item label="项目名称">{{ cxsqDetail.xmMc }}</el-descriptions-item>
        <el-descriptions-item label="撤销原因">{{ cxsqDetail.cxsqYy }}</el-descriptions-item>
        <el-descriptions-item label="是否审批通过">
          <el-tag v-if="cxsqDetail.cxsqZt == '1'" size="small" type="primary">审批通过</el-tag>
          <el-tag v-if="cxsqDetail.cxsqZt == '2'" size="small" type="danger">已驳回</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审批意见/驳回意见">{{ cxsqDetail.cxsqSpyj }}</el-descriptions-item>
        <el-descriptions-item label="房间打扫情况">{{ cxsqDetail.cxsqDsqk }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="CxsqDetaildialogVisible = false">确 定</el-button>
        <el-button @click="CxsqDetaildialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {queryXmCxsq,approvalXmCxsq} from "@/api/cxcyxm"
import axios from "../../axios/axios.js";

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      keyWord:{
        xmmc:"",
        cxsqZt:"",
      },
      zt:[{keyname:"全部",keyvalue:""},
        {keyname:"未审批",keyvalue:"0"},
        {keyname:"已审批",keyvalue:"1"},
        {keyname:"已驳回",keyvalue:"2"}],
      size: 0,
      loading: true,
      xmCxsqList: [],
      upCxsqdialogVisible: false,
      upCxsq:{
        cxsqBh:"",
        xmBh:localStorage.getItem("xmBh"),
        xmMc:localStorage.getItem("xmMc"),
        cxsqYy:"",
        cxsqDsqk:"",
        cxsqTcrq:"",
        cxsqSpyj:"",
        cxsqZt:"1"
      },
      CxsqDetaildialogVisible:false,
      cxsqDetail:{}
    }
  },
  created() {
      this.showXmCxsq()
  },
  methods: {
    showXmCxsq() {
      queryXmCxsq({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code !== "200") {
          this.$message.error(res.msg);
        } else {
          this.xmCxsqList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = parseInt(`${val}`);
      this.pageNo = 1;
      queryXmCxsq({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code === "200") {
          this.xmCxsqList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }

      })
    },
    handleCurrentChange(val) {
      this.pageNo = parseInt(`${val}`);
      if (this.pageNo > this.totalSize) {
        this.pageNo = this.totalSize
      }

      queryXmCxsq(
          {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            keyWord:this.keyWord
          }).then(res => {
        if (res.code === "200") {
          this.xmCxsqList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    toupdate(xmcxsq){
      this.upCxsq = xmcxsq
      this.upCxsqdialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false
    },
    toapprovalXmcxsq(xmBh){
      this.queryXmcxsq(xmBh)
      this.upCxsqdialogVisible = true
    },
    approvalXmCxsq(){
      approvalXmCxsq(this.upCxsq).then(res =>{
        if (res.code === "200") {
          this.$message.success(res.msg)
          this.upCxsqdialogVisible = false
          this.showXmCxsq()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    showXmcxsq(xmBh){
      axios({
        method: 'POST',
        url: '/xmCxsq/getXmCxsqDetail/' + xmBh
      }).then(res => {
        if (res.code === "200") {
          this.cxsqDetail = res.data
          this.CxsqDetaildialogVisible = true
        } else {
          this.$message.error(res.msg)
        }

      })
    }
  }
}
</script>

<style>
.form{
  width:60%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  right: -5%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0 20px 0;
}
.etable{
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
